<template>
  <div class="yardsBox">
    <!-- 产品SN换绑 -->
    <div class="yardsContent">
      <el-form
        ref="form"
        class="perForm"
        :model="form"
        label-width="150px"
        :rules="rules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="SN码(序列码)" prop="snCode">
              <el-input
                id="scanner-input-yard"
                v-model="form.snCode"
                type="textarea"
                placeholder="输入SN码"
                :autosize="{ minRows: 2, maxRows: 20 }"
                style="width: 100%"
                @input="(value) => snbutton(value, 'snCode')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="桩编码(ZN码)" prop="assemblyCode">
              <el-input
                id="assemblyCode-input"
                v-model="form.assemblyCode"
                type="textarea"
                placeholder="输入装配码"
                :autosize="{ minRows: 2, maxRows: 20 }"
                style="width: 100%"
                @input="(value) => snbutton(value, '1')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="售后码" prop="aftersaleCode">
              <el-input
                id="aftersaleCode-input"
                v-model="form.aftersaleCode"
                type="textarea"
                placeholder="输入售后码"
                :autosize="{ minRows: 2, maxRows: 20 }"
                style="width: 100%"
                @input="(value) => snbutton(value, '2')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row :gutter="24">
      <el-col :span="6">
        <div class="yardsDiv">
          <div>
            <el-button type="success" plain>SN码（序列码）</el-button>
          </div>
          <svg id="jsbarcode1" />
          <!-- <div>sn码</div> -->
        </div>
      </el-col>
      <el-col :span="6">
        <div class="yardsDiv">
          <div>
            <el-button type="success" plain>桩编码(ZN码)</el-button>
          </div>
          <div class="qrcode" ref="qrCodeUrl"></div>
          <div class="codetext">{{ form.assemblyCode }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="yardsDiv">
          <div>
            <el-button type="success" plain>售后码</el-button>
          </div>
          <div class="qrcode" ref="qrCodeUrl1"></div>
          <div class="codetext">{{ form.aftersaleCode }}</div>
        </div>
      </el-col>
    </el-row>
    <!-- 提示信息 -->
    <div class="textCont">{{ this.text }}</div>
    <div class="textCont">{{ this.textAfter }}</div>
    <div class="dialog_footer">
      <el-button @click="reset" style="font-size: 24px">重 置</el-button>
      <el-button
        type="primary"
        style="font-size: 24px"
        @click="submitForm"
        :disabled="text || textAfter"
        >提 交</el-button
      >
    </div>
  </div>
</template>
<script>
// proSop
import {
  selectUnique,
  addYardsInfo,
  getYardsBySnCode,
} from "@/api/apppro/index";
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode";
export default {
  name: "threeYardsCart",
  data() {
    return {
      imgList: [],
      leftList: [],
      rightList: [],
      text: null,
      form: {},
      textAfter: null,
      rules: {
        snCode: [{ required: true, message: "sn码不能为空", trigger: "blur" }],
      },
    };
  },
  props: {
    formObj: Object,
  },
  created() {
    // this.getList();
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addYardsInfo(this.form).then((res) => {
            this.$modal.msgSuccess(res.msg);
            this.reset();
          });
        }
      });
    },

    reset() {
      this.form = {
        snCode: undefined,
        assemblyCode: undefined,
        aftersaleCode: undefined,
      };
      this.text = null;
      this.textAfter = null;
      this.resetForm("form");
    },
    creatQrCode() {
      this.$refs.qrCodeUrl.innerHTML = "";
      this.$refs.qrCodeUrl1.innerHTML = "";
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.form.assemblyCode, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      var qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
        text: this.form.aftersaleCode, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    snbutton(e, type) {
      if (e === "") {
        return;
      }

      if (type == "snCode") {
        var myInputYard = document.getElementById("scanner-input-yard");
        myInputYard.onkeydown = (even) => {
          console.log(even, "=====e=====");
          if (even.key == "Enter") {
            getYardsBySnCode(e).then((res) => {
              if (res.data) {
                this.$modal.msgSuccess('该sn码已绑定！！！');
                this.form = res.data || {};
              }
              this.form.snCode = e;
              
              this.text = null;
              this.textAfter = null;
              this.creatQrCode();
              JsBarcode(
                document.getElementById("jsbarcode1"),
                this.form.snCode
              );
            });
          }
        };
      } else {
        var myInputYard = ''
        if(type=='1'){
          myInputYard = document.getElementById("assemblyCode-input");
        }else if(type=='2'){
          myInputYard = document.getElementById("aftersaleCode-input");
        }
        myInputYard.onkeydown = (even) => {
          console.log(even, "=====e=====");
          if (even.key == "Enter") {
            let query = { ...this.form };
            query.codeType = type;
            selectUnique(query).then((res) => {
              let data = res.data || {};
              console.log(res.data.snCode,this.form.snCode,"=====this.form.snCode=====");
              if (data.snCode && data.snCode != this.form.snCode) {
                if (type == "1") {
                  this.text = `该桩编码(ZN码)已匹配其他SN码（${data.snCode}）`;
                } else if (type == "2") {
                  this.textAfter = `该售后码已匹配其他SN码（${data.snCode}）`;
                }
              } else {
                if (type == "1") {
                  this.text = null;
                } else if (type == "2") {
                  this.textAfter = null;
                }
              }
              this.$modal.msgSuccess(res.msg);
            });
            this.creatQrCode();
          }
        };
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.yardsBox {
  width: 100%;
}
.yardsContent {
  width: 100%;
  margin-top: 20px;
}
.dialog_footer {
  width: 90%;
  text-align: center;
}
.textCont {
  text-align: center;
  font-size: 22px;
  color: red;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 15px;
}
.yardsBox ::v-deep.el-form-item__label {
  font-size: 20px;
}
.yardsBox ::v-deep.el-input--medium {
  font-size: 20px;
}
.yardsDiv {
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  button {
    margin-bottom: 10px;
    font-size: 18px;
  }
  .codetext {
    margin-top: 10px;
  }
}
</style>
        